<template>
  <view>
    <uv-navbar title="详情统计" @leftClick="leftClick" placeholder>
      <template #right>
        <uv-icon
          :name="iconFunnel"
          label="筛选"
          label-color="#4EA770"
          label-size="28rpx"
          @click="rightClick"
        />
      </template>
    </uv-navbar>
    <uni-table border stripe emptyText="暂无更多数据">
      <uni-tr>
        <uni-th align="center">时间</uni-th>
        <uni-th align="center">目标系统</uni-th>
        <uni-th align="center">目标设备</uni-th>
        <uni-th align="center">完成数量</uni-th>
        <uni-th align="center">检测结果</uni-th>
      </uni-tr>
      <uni-tr v-for="(i, k) in dataList" :key="k">
        <uni-td>{{ i.createTime }}</uni-td>
        <uni-td>{{ i.systemName }}</uni-td>
        <uni-td>{{ i.systemDeviceName }}</uni-td>
        <uni-td>{{ i.inspectCount }}</uni-td>
        <uni-td>{{ i.status == 1 ? "合格" : "不合格" }}</uni-td>
      </uni-tr>
    </uni-table>
    <uv-load-more v-if="dataList.length > 0" :status="status" line />
    <uv-popup ref="popupRef" mode="right" z-index="980" closeable>
      <view class="popup-content">
        <uv-status-bar />
        <uv-text
          text="数据筛选"
          color="#757575"
          size="28rpx"
          line-height="100rpx"
          margin="auto 30rpx"
        />
        <uv-text
          text="时间"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view class="row">
          <view
            class="row-btn"
            v-for="(i, k) in times"
            :key="k"
            :class="{ active: i.value == time }"
            @click="changeTime(i)"
          >
            {{ i.label }}
          </view>
        </view>
        <uv-text
          text="自定义时间段"
          color="#757575"
          size="28rpx"
          line-height="80rpx"
          margin="auto 30rpx"
        />
        <view class="date-box" @click="handleCalendar">
          <uv-icon name="clock" color="#BDBDBD" size="28rpx" />
          <view v-if="!queryParams.beginTime || !queryParams.endTime" class="placeholder"
            >选择时间范围</view
          >
          <view v-else class="date">
            {{ queryParams.beginTime }} - {{ queryParams.endTime }}
          </view>
        </view>
        <view class="row-bottom">
          <uv-button text="重置" @click="resetQuery" />
          <uv-button
            text="确定"
            color="#fff"
            :custom-style="{
              background: '#4EA770',
            }"
            @click="handleQuery"
          />
        </view>
      </view>
    </uv-popup>
    <uv-calendars
      ref="calendarsRef"
      mode="range"
      :round="0"
      color="#4EA770"
      confirm-color="#4EA770"
      allow-same-day
      :date="
        queryParams.beginTime && queryParams.endTime
          ? [queryParams.beginTime, queryParams.endTime]
          : ''
      "
      @confirm="confirmDate"
    />
  </view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { getDateRange } from "@/common/mothed.js";
import { getBoardDetails } from "@/request/home.js";
import iconFunnel from "@/static/icon_funnel.png";

const queryParams = ref({
  beginTime: "", // 开始时间
  endTime: "", // 结束时间
  subPlanId: "", // 项目id
  pageNum: 1, // 当前页码
  pageSize: 10, // 每页数量
});
const total = ref(0); // 总数量
const dataList = ref([]); // 项目完成列表
const popupRef = ref(); // 弹出层ref
const calendarsRef = ref(); // 日历组件ref
const status = ref("loadmore"); // 加载状态
const time = ref(""); // 选中时间类型
const times = ref([
  { value: "month", label: "本月" },
  { value: "week", label: "本周" },
  { value: "day", label: "今日" },
]); // 快捷时间列表

onLoad((e) => {
  queryParams.value.subPlanId = e.id;
  getList();
});

onPullDownRefresh(() => {
  queryParams.value.pageNum = 1;
  getList();
});

onReachBottom(() => {
  if (dataList.value.length < total.value) {
    queryParams.value.pageNum++;
    getList();
  }
});

// 获取数据列表
const getList = () => {
  status.value = "loading";
  getBoardDetails(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
    });
};

// 时间类型切换
const changeTime = (i) => {
  const range = getDateRange(i.value);
  queryParams.value.beginTime = range[0];
  queryParams.value.endTime = range[1];
  time.value = i.value;
};

// 返回上级
const leftClick = () => {
  uni.navigateBack({ delta: 1 });
};

// 打开筛选弹窗
const rightClick = () => {
  popupRef.value.open();
};

// 打开日历弹窗
const handleCalendar = () => {
  calendarsRef.value.open();
};

// 选择日期
const confirmDate = (val) => {
  queryParams.value = val.range.before;
  queryParams.value.endTime = val.range.after;
  time.value = "";
};

// 重置查询
const resetQuery = () => {
  time.value = "";
  queryParams.value = "";
  queryParams.value.endTime = "";
  popupRef.value.close();
  getList();
};

// 确认查询
const handleQuery = () => {
  popupRef.value.close();
  getList();
};
</script>
<style lang="scss" scoped>
.popup-content {
  width: 600rpx;
  height: 100%;
  position: relative;
  .row {
    display: grid;
    gap: 20rpx;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 30rpx;
    margin-bottom: 40rpx;
    &-btn {
      width: 160rpx;
      height: 66rpx;
      border-radius: 8rpx;
      background-color: #fff;
      border: 2rpx solid #dedede;
      font-size: 28rpx;
      color: #757575;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      color: #fff;
      background-color: #4ea770;
      border: 2rpx solid #4ea770;
    }
  }
  .date-box {
    height: 66rpx;
    padding: 12rpx;
    box-sizing: border-box;
    margin: auto 30rpx;
    background: #ffffff;
    border-radius: 8rpx;
    border: 2rpx solid #dedede;
    display: flex;
    align-items: center;
    .placeholder {
      font-size: 28rpx;
      color: #bdbdbd;
      margin-left: 10rpx;
    }
    .date {
      font-size: 28rpx;
      color: #bdbdbd;
      margin-left: 10rpx;
    }
  }
  .row-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    view {
      flex: 1;
    }
  }
}
:deep(.uv-popup__content__close--top-right) {
  top: calc(15px + var(--status-bar-height)) !important;
}
</style>
